let boxheight; // 画布的高度

function Painter(id) {
  // console.log('初始化');
  this.canvasEle = document.getElementById(id); // 获取画布元素
  this.context = this.canvasEle.getContext('2d'); // 获取2D绘图上下文
  this.isClear = false; // 是否启用橡皮擦功能的标志
  this.open = true; // 是否开启绘制：关闭时无法再进行绘制
  this.initCanvas(); // 初始化画布
  this.drawLine(); // 启动绘图功能
}

// 初始化画布尺寸和样式
Painter.prototype.initCanvas = function () {
  const canvasEle = this.canvasEle;
  const boxwidth = document.body.clientWidth;
  canvasEle.width = boxwidth;
  boxheight = window.innerHeight; // 画布的高度
  console.log('boxheight ======> ', boxheight);
  canvasEle.height = boxheight;

  // 创建线性渐变
  const linearGradient = this.context.createLinearGradient(0, 0, boxwidth, boxheight);
  linearGradient.addColorStop(0, '#1EEB9F');
  linearGradient.addColorStop(0.5, '#FFFFFF');
  linearGradient.addColorStop(1, '#26B9EB');
  this.context.strokeStyle = linearGradient; // 设置画笔颜色为渐变色
};

// 绘图函数
Painter.prototype.drawLine = function drawLine() {
  // console.log('注册绘制监听');
  const self = this;
  // 鼠标移动事件处理函数
  function moveAction(event) {
    const pageX = event.pageX || event.targetTouches[0].pageX;
    const pageY = event.pageY || event.targetTouches[0].pageY;
    const temp1 = ((window.boxwidth - window.boxwidthOld) * pageX) / window.boxwidth;

    // 如果开启了橡皮擦功能，清除路径区域
    if (self.isClear) {
      self.context.clearRect(pageX, pageY - 10, 40, 40); // 清除区域
      return;
    }
    self.context.lineTo(pageX + 2 - temp1, pageY + 2); // 绘制到新的位置
    self.context.stroke();
  }

  // 鼠标按下事件处理函数
  function startAction(event) {
    // 如果橡皮擦关闭，不执行绘制
    if (!self.open) {
      return;
    }

    const pageX = event.pageX || event.targetTouches[0].pageX;
    const pageY = event.pageY || event.targetTouches[0].pageY;
    const temp1 = ((window.boxwidth - window.boxwidthOld) * pageX) / window.boxwidth;

    if (self.open) {
      // console.log('开始绘制');
      self.context.beginPath();
      self.context.moveTo(pageX - temp1, pageY);
      self.context.stroke();
    }

    // 绑定鼠标移动事件
    self.context.canvas.addEventListener('mousemove', moveAction);
    self.context.canvas.addEventListener('touchmove', moveAction);
  }

  // 鼠标抬起事件处理函数
  function endAction() {
    // 解绑鼠标移动事件
    self.context.canvas.removeEventListener('mousemove', moveAction);
    self.context.canvas.removeEventListener('touchmove', moveAction);
  }

  // 绑定鼠标事件
  self.context.canvas.addEventListener('mousedown', startAction);
  self.context.canvas.addEventListener('mouseup', endAction);
  self.context.canvas.addEventListener('touchstart', startAction);
  self.context.canvas.addEventListener('touchend', endAction);
};

// 设置画笔宽度
Painter.prototype.setLineWidth = function setLineWidth(width) {
  // console.log('设置画笔宽度');
  this.context.lineWidth = width;
};

// 设置画笔线条样式
Painter.prototype.isRoundLineCap = function isRoundLineCap(isRound) {
  // console.log('设置画笔线条');
  this.context.lineCap = isRound ? 'round' : 'butt';
};

// 设置画笔颜色
Painter.prototype.setLineColor = function setLineColor(color) {
  this.context.strokeStyle = color;
};

// 保存画布内容
Painter.prototype.save = function save() {
  return this.context.canvas.toDataURL();
};

// 启动橡皮擦功能
Painter.prototype.eraser = function eraser(boo) {
  this.isClear = boo;
};

// 启用画布功能
Painter.prototype.setOpenStatus = function setOpenStatus(boo) {
  this.open = boo;
};

// 清空画布
Painter.prototype.clearCls = function clearCls() {
  const boxwidth = document.body.clientWidth;
  this.context.clearRect(0, 0, boxwidth, boxheight);
  // this.context.lineWidth = 4; // 重置画笔宽度
  this.isClear = false; // 关闭橡皮擦功能
};

// 初始化画布
export const init = (id) => {
  setTimeout(() => {
    // console.log('延迟创建');
    const panter = new Painter(id);
    window.Painter = panter;
    panter.setLineWidth(window.lineWidth);
    panter.setLineColor(window.lineColor);
  }, 200);
};

// 设置画笔宽度
export const setsize = async (lineWidth) => {
  window.Painter.setLineWidth(lineWidth);
};

// 设置画笔颜色
export const setcolor = (lineColor) => {
  window.Painter.setLineColor(lineColor);
};

// 启用橡皮擦
export const banca = (v) => {
  const panter = window.Painter;
  panter.eraser(v);
};

// 清空画布
export const clearScreen = () => {
  const panter = window.Painter;
  panter.clearCls();
};

// 设置是否开启绘制
export const setOpen = (boo) => {
  const panter = window.Painter;
  panter.setOpenStatus(boo);
};
